<template>
  <el-form :model="form" @submit.prevent="handleSubmit" label-width="80px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name" required />
    </el-form-item>
    <el-form-item label="薪水" prop="salary">
      <el-input-number v-model="form.salary" :min="0" required />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" native-type="submit">提交</el-button>
    </el-form-item>
  </el-form>
  <hr />
  <div>&nbsp;</div>
  <div class="salar-info-pro">
    父组件传递的信息：{{ salaryInfoPro }}
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
import { ElForm, ElFormItem, ElInput, ElInputNumber, ElButton } from 'element-plus';
import type { SalaryInfo } from '@/types/SalaryInfo';

// 接收父组件传递属性
const props = defineProps<{ salaryInfoPro: SalaryInfo }>();
const salaryInfoPro = props.salaryInfoPro;

const form = reactive<SalaryInfo>({
  name: 'lily',
  salary: 100,
});

// 监听父组件传递的数据变化，更新表单
watch(
  () => salaryInfoPro,
  (newVal) => {
    if (newVal) {
      form.name = newVal.name;
      form.salary = newVal.salary;
    }
  },
  { immediate: true }
);

// 表单提交处理
const handleSubmit = () => {
  console.log('提交数据:', form);
};

// 暴露属性给父组件
defineExpose({ form });
</script>
